<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	</head>
	<body>
		
		<!--
			
			移动端页面布局方式
				1、流式布局(百分比布局)
				2、flex(css3的一种新的布局方式)
			
			移动端页面在开始写布局和样式之前，要在head中加一句话（不需要背,但是必须要写）
			
			        width  device-width
			initial-scale  1
			user-scalable  0
			
			
		-->
		
				
		<!-- 
			
			标签语义化：(用不好的话，不如不用)
			https://www.jianshu.com/p/35de4476fe27
			
			
			1、代码结构清晰，方便阅读，有利于团队合作开发。
			2、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
			3、有利于搜索引擎优化（SEO）。☆☆☆
			4、便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。			
		 
		-->
		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			header{
				width: 100%;
				height: 50px;
				background: lightgray;
				overflow: hidden;
			}
			.logo{
				width: 50px;
				height: 50px;
				background: hotpink;
				float: left;
			}
			.mine{
				width: 50px;
				height: 50px;
				background: palegreen;
				float: right;
			}
			.search{
				height: 50px;
				background: palegoldenrod;
				/* margin: 0 70px; */
				width: calc(100% - 120px);
				margin: 0 auto;
			}
			.main{
				width: 100%;
				max-width: 800px;
				margin: 0 auto;
				overflow: hidden;
			}
			.category .cate{
				width: 20%;
				height: 80px;
				float: left;
			}
			.category .cate:nth-child(1){
				background: plum;
			}
			.category .cate:nth-child(2){
				background: paleturquoise;
			}
			.category .cate:nth-child(3){
				background: palegoldenrod;
			}
			.category .cate:nth-child(4){
				background: palegreen;
			}
			.category .cate:nth-child(5){
				background: powderblue;
			}
			
			
			.test{
				width: 200px;
				height: 100px;
				background: deepskyblue;
				padding: 0 50px;
				border: 10px solid purple;
				box-sizing: border-box;
			}
			
			/* 
			 
				盒子模型：
					box-sizing: content-box(默认) | border-box
					content-box => 元素的宽 = width + padding + border 
					border-box => 元素的宽 = width
					
			*/
			
		</style>
		
		<header>
			<!-- 三栏布局，左右定宽，中间自适应 -->
			<div class="logo"></div>
			<div class="mine"></div>
			<div class="search"></div>
		</header>
		<div class="main">
			<div class="category">
				<div class="cate"></div>
				<div class="cate"></div>
				<div class="cate"></div>
				<div class="cate"></div>
				<div class="cate"></div>
			</div>
		</div>
		<footer class="tabbar"></footer>
		
		<div class="test"></div>
		
		<!-- 
			
			作业：https://m.mi.com/
				 首页、我的、登录、小米秒杀(2天)
							
		-->
		
	</body>
</html>
